<template>
  <div class="order-list-container">
    <el-breadcrumb>
      <el-breadcrumb-item>结算管理</el-breadcrumb-item>
      <el-breadcrumb-item>发票管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form>
        <div class="order-warpper">
          <div class="group-1">
            <el-dropdown @command="setInvoiceType">
              <span class="el-dropdown-link">
                {{invoiceTypeStr}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{title:'抬头类型',id:''}">全部</el-dropdown-item>
                <el-dropdown-item :command="{title:'个人发票',id:'1'}">个人发票</el-dropdown-item>
                <el-dropdown-item :command="{title:'普通发票',id:'2'}">普通发票</el-dropdown-item>
                <el-dropdown-item :command="{title:'专业发票',id:'3'}">专业发票</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="group-1">
            <el-dropdown @command="setPayment">
              <span class="el-dropdown-link">
                {{PaymentStr}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{title:'领取方式',id:''}">全部</el-dropdown-item>
                <el-dropdown-item :command="{title:'前厅领取',id:'1'}">前厅领取</el-dropdown-item>
                <el-dropdown-item :command="{title:'快递邮寄',id:'2'}">快递邮寄</el-dropdown-item>
                <el-dropdown-item :command="{title:'电子邮件',id:'3'}">电子邮件</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="group-1">
            <el-dropdown @command="setInvoiceState">
              <span class="el-dropdown-link">
                {{invoiceStateStr}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{title:'开票状态',id:''}">全部</el-dropdown-item>
                <el-dropdown-item :command="{title:'未开票',id:'1'}">未开票</el-dropdown-item>
                 <el-dropdown-item :command="{title:'已开票',id:'2'}">已开票</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="group-1">
            <el-dropdown @command="setReceiveState">
              <span class="el-dropdown-link">
                {{ReceiveStateStr}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{title:'领取状态',id:''}">全部</el-dropdown-item>
                <el-dropdown-item :command="{title:'未领取',id:'1'}">未领取</el-dropdown-item>
                <el-dropdown-item :command="{title:'未寄出',id:'2'}">未寄出</el-dropdown-item>
                <el-dropdown-item :command="{title:'未发送',id:'3'}">未发送</el-dropdown-item>
                <el-dropdown-item :command="{title:'已领取',id:'4'}">已领取</el-dropdown-item>
                <el-dropdown-item :command="{title:'已寄出',id:'5'}">已寄出</el-dropdown-item>
                <el-dropdown-item :command="{title:'已发送',id:'6'}">已发送</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="group-2">
            <input autocomplete="off"
              placeholder="请输入订单号"
              type="text"
              rows="2"
              validateevent="true"
              class="el-input__inner"
              v-model="orderNum">
          </div>
          <div class="group-2">
            <input autocomplete="off"
              placeholder="开票申请人/发票抬头"
              type="text"
              rows="2"
              validateevent="true"
              class="el-input__inner"
              v-model="name">
          </div>
          <el-button type="primary"
            @click.native="getData"
            class="searc"
            style=" line-height: 32px;padding: 0 21px;">
            <i class="el-icon-search"></i>
          </el-button>
        </div>
        <el-form-item class="easy-table">
          <el-table :data="invoiceListArray"
            style="width: 100%"
            max-height="600">
            <el-table-column prop="orderNum"
              label="订单号"
              min-width="150">
            </el-table-column>
            <el-table-column label="开票申请人"
              min-width="100"
              prop="name">
            </el-table-column>
            <el-table-column label="开票金额"
              min-width="100"
              prop="invoiceMoney">
            </el-table-column>

            <el-table-column label="发票抬头"
              min-width="100"
              prop="taxName">
            </el-table-column>

            <el-table-column label="发票类型"
              min-width="100"
              prop="invoiceTypeCN">
            </el-table-column>
            <el-table-column label="领取方式"
              min-width="100"
              prop="ticketWayCN">
            </el-table-column>
            <el-table-column label="开票状态"
              min-width="100"
              prop="stateCN">
            </el-table-column>
            <el-table-column label="领取状态"
              min-width="100"
              prop="stateDoneCN">
            </el-table-column>
            <el-table-column fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="InvoiceDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { invoiceList } from "@/public/js/invoice";
const Breadcrumb = () => import("@/components/common/Breadcrumb");
const cityData = require("@/data/cities.json");

export default {
  name: "orderForm",
  components: {
    Breadcrumb
  },
  data() {
    return {
      content: {
        firstTitle: "发票",
        secondTitle: "发票列表",
        type: "close"
      },
      invoiceListArray: [],
      orderNum: "",
      pageNo: 1,
      pageSize: 10,
      // invoiceState: "",
      // checkInState: "",
      name: "",
      state: "",
      invoiceType: "",
      ticketWay: "",
      invoiceStateStr: "开票状态",
      ReceiveStateStr: "领取状态",
      invoiceTypeStr: "抬头类型",
      PaymentStr: "领取方式",
      total: 0
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    //获取入住单列表
    getData() {
      let fromData = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        state: this.state,
        invoiceType: this.invoiceType,
        orderNum: this.orderNum,
        name: this.name,
        ticketWay: this.ticketWay
      };
      //console.log(this.pageNo)
      invoiceList(fromData).then(res => {
        if (!res.data.errCode) {
          console.log(res.data);
          (this.invoiceListArray = res.data.invoiceList),
            (this.total = res.data.total);
        }
      });
    },
    //发票状态
    setInvoiceState(command) {
      this.invoiceStateStr = command.title;
      this.state = command.id;
      this.getData();
    },
    // 领取状态
    setReceiveState(command) {
      this.ReceiveStateStr = command.title;
      //this.checkInState = command.id;
      if(command.id == '1'||command.id == '2'||command.id == '3'){
        this.state = 3;
      }else{
        this.state = 4;
      }
      if(command.id == '1'||command.id == '4'){
        this.ticketWay = 1
      }
      if(command.id == '2'||command.id == '5'){
        this.ticketWay = 2
      }
      if(command.id == '3'||command.id == '6'){
        this.ticketWay = 3
      }
      console.log(command,this.state);
      this.getData();
    },
    //抬头类型
    setInvoiceType(command) {
      this.invoiceTypeStr = command.title;
      this.invoiceType = command.id;
      this.getData();
    },
    //领取方式
    setPayment(command) {
      this.PaymentStr = command.title;
      this.ticketWay = command.id;
      this.getData();
    },
    InvoiceDetail(item) {
      localStorage.setItem('stateDoneCN',item.stateDoneCN);
      this.$router.push({
        path: "/index/invoice_detail",
        query: { id: item.id }
      });
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.getData();
    },
    handleCurrentChange(value) {
      this.pageNo = value;
      this.getData();
    },
    handleSearch() {
      this.getData();
    }
  }
};
</script>
<style lang="scss" scoped>
.order-warpper {
  .group-1 {
    width: 70px;
    display: inline-block;
    margin-right: 20px;
  }
  .group-2 {
    width: 200px;
    display: inline-block;
    margin-right: 20px;
  }
  .group-3 {
    margin-top: 20px;
  }
  .btn {
    text-align: right;
  }
  .el-input__inner {
    height: 34px;
  }
  .search-button .el-button {
    padding: 9px 20px;
  }
}
.order-list-container {
  text-align: left;

  .el-date-editor--daterange.el-input__inner {
    padding: 0;
    padding-left: 10px;
    width: auto;
  }

  .el-input {
    width: auto;
  }

  .easy-search-other {
    width: 300px;
  }
}
.account-content {
  & > div {
    display: flex;
    padding-bottom: 15px;
    & > div {
      flex: 1;
    }
  }
}
.miNiCommListTable {
  border: 1px solid #ddd;
  border-right: 0;
  li {
    display: flex;
    border-bottom: 1px solid #ddd;

    div {
      flex: 1;
      line-height: 45px;
      font-size: 12px;
      text-indent: 23px;
      border-right: 1px solid #ddd;
    }
    &.header > div {
      background: #eef1f9;
      color: #415161;
    }
    & > .input-number .input-number-count {
      text-align: center;
      text-indent: 0;

      p {
        display: inline-block;
        background: #6d2377;
        height: 30px;
        line-height: 30px;
        width: 30px;
        border-radius: 5px 0 0 5px;
        color: #fff;
        cursor: pointer;
      }
      input {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: none;
        width: 30px;
        text-align: center;
        border: 1px solid #6d2377;
        box-sizing: border-box;
      }
    }
  }
}
</style>
